import React, { Component } from "react";
import MainLayout from "../../../component/mainLayout/mainLayout";
import { DatePicker, ListView } from "antd-mobile";
import * as ReactDOM from "react-dom";
import dataImg from "@/images/icon/data.png";
import top from "@/images/icon/top_active.png";
import bottom from "@/images/icon/bottom_active.png";
import XHQBConfig from "../../../config/XHQBConfig";
import yhTools from "../../../tools/yh";
import { Toast } from "antd-mobile";
import "./walletBillPage.scss";
import NoData from "@/component/noData/noData";

let nowdate = new Date();
let year = nowdate.getFullYear();
let month = nowdate.getMonth() + 1;
month = month < 10 ? "0" + month : month;
let chooseDate = year + "" + month;

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const utcNow = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
let minDate = new Date(nowTimeStamp - 1e7);
const maxDate = new Date(nowTimeStamp + 1e7);
if (minDate.getDate() !== maxDate.getDate()) {
	minDate = new Date(
		maxDate.getFullYear(),
		maxDate.getMonth(),
		maxDate.getDate()
	);
}

const payTools = [
	{
		name: "全部",
		id: "-1"
	},
	{
		name: "小辉付",
		id: "1001"
	},
	{
		name: "快捷支付",
		id: "1003"
	},
	{
		name: "余额支付",
		id: "1004"
	},
	{
		name: "微信支付",
		id: "1005"
	}
];

const tranTypes = [
	{
		name: "全部",
		id: "-1"
	},
	{
		name: "支付",
		id: "0"
	},
	{
		name: "退款",
		id: "1"
	}
];

class walletBillPage extends Component {
	constructor(props) {
		super(props);
		const dataSource = new ListView.DataSource({
			rowHasChanged: (row1, row2) => row1 !== row2
		});
		this.state = {
			chooseDate: '',
			date: null,
			time: now,
			utcDate: utcNow,
			dpValue: null,
			customChildValue: null,
			visible: false,
			wayShow: false,
			classifyShow: false,
			itemWayName: "支付方式",
			itemWayId: "-1",
			itemClassifyName: "分类",
			itemClassifyId: "-1",
			titleData: {},
			data: [],
			dataSource: dataSource,
			height: (document.documentElement.clientHeight * 3) / 4,
			hasMore: false,
			isLoading: false,
		};
		this.page = 0;
	}
	componentDidMount() {
		this.goList();
	}

	onEndReached = () => {
		let page = this.page + 1;
		let objs = {
			url: XHQBConfig.moneyBill,
			params: {
				pageIndex: page,
				pageLimit: 10,
				pageSize: 10,
				payTools: [this.state.itemWayId + ""],
				timeString: this.state.chooseDate,
				tranTypes: [this.state.itemClassifyId + ""]
			}
		};
		this.setState({
			hasMore: true,
			isLoading: true
		});
		yhTools.request(objs).then(res => {
			Toast.hide();
			this.setState({ refreshing: false });
			if (res.resCode === 200) {
				if (res.data && res.data.billVos.length > 0) {
					let data = [...this.state.data];
					data = data.concat(res.data.billVos);
					this.setState({
						data: this.chulidata(data),
					});
					this.page = page;
				}
				this.setState({
					hasMore: false,
					isLoading: false
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	chulidata = (list) => {
		let _list = [];
		list.forEach((item, index) => {
			if (index != 0 && item.isSummary == 1 && list[index - 1].tranTime.slice(4, 6) == item.tranTime.slice(4, 6)) {

			} else {
				_list.push(item)
			}
		});
		return _list;
	}

	goList() {
		const hei =
			document.documentElement.clientHeight -
			ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
		let objs = {
			url: XHQBConfig.moneyBill,
			params: {
				pageIndex: 0,
				pageLimit: 10,
				pageSize: 10,
				payTools: [this.state.itemWayId + ""],
				timeString: this.state.chooseDate,
				tranTypes: [this.state.itemClassifyId + ""]
			}
		};
		this.setState({
			isLoading: true
		});
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.resCode === 200) {
				if (res.data.billVos.length > 0) {
					let data = [...this.state.data];
					data = data.concat(res.data.billVos);
					this.setState({
						data: this.chulidata(data),
						height: hei
					});
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	timeFormat(time) {
		let year = time.slice(0, 4),
			month = time.slice(4, 6),
			day = time.slice(6, 8),
			hour = time.slice(8, 10),
			mm = time.slice(10, 12),
			ss = time.slice(12, 14);
		let value = `${year}-${month}-${day} ${hour}:${mm}:${ss}`;
		return value;
	}
	onChange(date) {
		let nowdate = new Date(date);
		let year = nowdate.getFullYear();
		let month = nowdate.getMonth() + 1;
		month = month < 10 ? "0" + month : month;
		let chooseDate = year + "" + month;
		this.page = 0;
		this.setState(
			{
				chooseDate: chooseDate,
				date: date,
				data: [],
			},
			() => {
				this.goList();
			}
		);
	}
	// 打开 支付方式
	showPeriods() {
		this.setState({
			wayShow: true,
			classifyShow: false
		});
	}
	showClassify() {
		this.setState({
			classifyShow: true,
			wayShow: false
		});
	}
	onFalse() {
		this.setState({
			classifyShow: false,
			wayShow: false
		});
	}
	itemWay(item) {
		this.page = 0;
		this.setState(
			{
				itemWayName: item.name,
				itemWayId: item.id,
				wayShow: false,
				data: [],
			},
			() => {
				this.goList();
			}
		);
		console.log("item", item.name);
	}
	itemClassify(item) {
		this.page = 0;
		this.setState(
			{
				itemClassifyName: item.name,
				itemClassifyId: item.id,
				classifyShow: false,
				data: [],
			},
			() => {
				this.goList();
			}
		);
		console.log("item", item);
	}

	row = (item) => {
		return (
			<div id="box">
				{
					item.isSummary == "1" && (
						<div className="sticky" key={item}>
							<div className="dataTitle">{item.payDesc}</div>
						</div>
					)}
				{
					item.isSummary == "0" && (
						<div className="list-box">
							<div className="list" key={item}>
								<div className="name">
									<div>{item.payToolName}</div>
									<div>
										{`${item.tranType == "0" ? "-" : "+"}${item.tranAmount
											? parseFloat(item.tranAmount / 100).toFixed(2)
											: "0.00"
											}`}
									</div>
								</div>
								<div className="time">
									<div>{this.timeFormat(item.tranTime)}</div>
									<div>
										{item.tranType === "0" ? (
											<div>支付</div>
										) : (
											<div>退款</div>
										)}
									</div>
								</div>
							</div>
						</div>
					)
				}
			</div>
		)
	}

	render() {
		let {
			wayShow,
			classifyShow,
			itemWayName,
			itemClassifyName,
		} = this.state;
		const headerParams = {
			header: {
				title: "钱包账单",
				headerBackground: "#ffffff",
				titleColor: "#000000",
				backButtColor: "backButtColor",
				newBackButt: true
			},
			history: this.props.history
		};
		return (
			<div>
				<MainLayout pageParams={headerParams}>
					<div className="walletBillPage">
						<div className="titleCont">
							<div>
								<div className="left" onClick={this.showPeriods.bind(this)}>
									{wayShow ? (
										<div className="name color">{itemWayName}</div>
									) : (
										<div className="name">{itemWayName}</div>
									)}
									<img src={wayShow ? top : bottom} alt="" />
								</div>
								<div className="right" onClick={this.showClassify.bind(this)}>
									{classifyShow ? (
										<div className="name color">{itemClassifyName}</div>
									) : (
										<div className="name">{itemClassifyName}</div>
									)}
									<img src={classifyShow ? top : bottom} alt="" />
								</div>
							</div>
							<DatePicker
								className="qb-date-select"
								mode="month"
								title="选择日期"
								extra="Optional"
								format="yyyy-mm"
								value={this.state.date}
								onChange={this.onChange.bind(this)}
							>
								<img className="img" id="img" src={dataImg} alt="" />
							</DatePicker>
						</div>
						{wayShow ? (
							<div>
								<div className="mask" onClick={this.onFalse.bind(this)}></div>
								<div className="itemCont">
									{payTools.map((item, index) => {
										return (
											<div
												key={index}
												className={
													this.state.itemWayId === item.id ? "active" : "item"
												}
												onClick={this.itemWay.bind(this, item)}
											>
												{item.name}
											</div>
										);
									})}
								</div>
							</div>
						) : null}
						{classifyShow ? (
							<div>
								<div className="mask" onClick={this.onFalse.bind(this)}></div>
								<div className="itemCont">
									{tranTypes.map((item, index) => {
										return (
											<div
												key={index}
												className={
													this.state.itemClassifyId === item.id
														? "active"
														: "item"
												}
												onClick={this.itemClassify.bind(this, item)}
											>
												{item.name}
											</div>
										);
									})}
								</div>
							</div>
						) : null}
						<div className="line"></div>
						<ListView
							ref={el => (this.lv = el)}
							dataSource={this.state.dataSource.cloneWithRows(this.state.data)}
							renderFooter={() => (
								<div className="bill-record_listview_foot">
									{this.state.hasMore ? "加载中" : this.state.data.length > 0 ? "没有更多了" : ''}
								</div>
							)}
							renderRow={this.row}
							style={{
								height: this.state.height,
								overflow: "auto"
							}}
							initialListSize={20}
							onEndReached={this.onEndReached}
						/>
						{this.state.data.length == 0 && (<NoData params={{ type: "cover", msg: '暂无数据' }} />)}
					</div>
				</MainLayout>
			</div>
		);
	}
}
export default walletBillPage;
